<template>
  <page title="新增需求申请表" :has-back="true" :back-callback="back">
    <el-row justify="center">
      <el-col :span="18">
        <el-steps :active="active" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="需求明细"></el-step>
          <el-step title="确认申请表"></el-step>
          <el-step title="提交成功"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <keep-alive>
      <component :is="content" @next="next" @back="back" v-model="form"></component>
    </keep-alive>
  </page>
</template>

<script>
import page from "@/components/Page";
import first from "@/components/first"
import second from "@/components/second";
import third from "@/components/third";
import end from "@/components/end";
import axios from "axios";
export default {
  name: "newList",
  components: {page,first,second,third,end},
  data(){
    return{
      form: {
        project:{
          name: '',
          startDate: '',
          endDate: '',
          people: '',
          part: {

          },
          user: {

          },
        },
        accNeed: {
          checkInWay: 0,
          detailList:[],
          detail:'',
        },
        foodNeed:{
          detailList:[],
          detail:"",
        },
        classroomNeed:{
          detailList:[],
          detail:"",
        },
        //传递日期
        dates:[]
      },
      active: 0,
      content: "first",
      statusMap:{
        0:"first",
        1:"second",
        2:"third",
        3:"end"
      }
    }
  },
  methods: {
    next(){
      this.active++;
      this.content = this.statusMap[this.active];
    },
    back(){
      if(this.active <= 0 || this.active >= 3){
        this.$router.back();
      }else{
        this.active--;
        this.content = this.statusMap[this.active];
      }
    },
    getForm(){
      return axios.get(this.$host+"/form").then(response=>{
        this.form = response.data.data;
        console.log(this.form);
      });
    }
  },
  created() {
    this.getForm();
  }
}
</script>

<style scoped>

</style>